<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
    <script src="../../build/aui/aui.js"></script>
    <style>
        .dropdown-menu {
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>AlloyUI - Dropdown</h1>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li id="dropdown" class="dropdown">
                        <a id="trigger" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            <div>Hi! I'm a dropdown!</div>
                            <div>Hi! I'm a dropdown!</div>
                            <div>Hi! I'm a dropdown!</div>
                        </ul>
                    </li>
                    <li id="stick" class="dropdown">
                        <a href="#" id="drop2" class="dropdown-toggle" data-toggle="dropdown">Stick <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            I only close on escape
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script>

    YUI({ filter: 'raw' }).use('aui-dropdown', function(Y) {

        new Y.Dropdown({
            boundingBox: '#dropdown',
            contentBox: '#dropdown',
            trigger: '#trigger',
            render: true
        });

        new Y.Dropdown({
            boundingBox: '#stick',
            contentBox: '#stick',
            hideOnClickOutSide: false,
            trigger: '#stick .dropdown-toggle',
            render: true
        });

    });
    </script>
</body>
</html>